import styled from "styled-components";
import {
  LoadingOutlined,
} from '@ant-design/icons';
const PanelContainer = ({ children, panelOption, panelLoading }, ref) => {

  return (<StyleWrap className="panel-container">
    <div className="panel-title-container">
      <div className="el-dropdown">
        <div className="panel-title-wrap">
          {/* <div className="icon el-icon-s-marketing"></div> */}
          <div className="panel-title-text">{panelOption.title}</div>
          {/* <div className="Arrow el-icon-caret-bottom"></div> */}
        </div>
      </div>
    </div>
    <div className="panel-content">
      {children}
    </div>
    <div style={{ display: panelLoading ? 'block' : 'none' }} className="panel-loading">
      <LoadingOutlined />
    </div>
  </StyleWrap>);
}

const StyleWrap = styled.div`
 &.panel-container{background-color: #002146;
  border: 1px solid #326394;
  position: relative;
  border-radius: 3px;
  height: 100%;
  width: 100%;
  height: 100%;}
.panel-title-container {
  cursor: move;
  background: linear-gradient(180deg,rgba(0,0,0,.1),#075aad 70%);
  &:hover {
    /* background-color: #002f5c; */
  }
  .el-dropdown {
    width: 100%;
    text-align: center;
  }
}
.panel-title-wrap {
  display: inline-flex;
  // cursor: pointer;
  justify-content: center;
  align-items: center;
  height: 28px;
  font-size: 14px;
  .panel-title-text {
    margin: 0 6px;
  }
}

.panel-content {
  height: calc(100% - 28px);
  padding: 8px;
  position: relative;
}

.panel-loading {
  font-size: 14px;
  position: absolute;
  top: 0px;
  right: 5px;
  line-height: 28px;
}
`;

export default PanelContainer;